<template>
  <view>
    <u-navbar :is-back="false" title="添加库存"
      title-size="30"
      :background="{background:'#2B88FE' }"
      title-color="#fff">
      <div class="head_icon">
        <u-icon @click="$api.handleBackTo"
          name="arrow-left" color="#fff"
          size="36">
        </u-icon>
        <u-icon @click="$api.handleHomeTo"
          name="home" color="#fff" size="36">
        </u-icon>
      </div>
    </u-navbar>
    <div class="app-draw-add">
      <appProduct v-for="(v,i) in list" :key="i"
        :li="v">
        <view slot="cell" class="kcCell">
          <span> 散装（{{v.fUnit}}）：</span>
          <u-input border type="text"
            v-model="v.fCount"></u-input>
        </view>
		<view slot="cell" class="kcCell">
		  <span> 整装（{{v.fPackUnit}}）：</span>
		  <u-input border type="text"
		    v-model="v.fPackCount"></u-input>
		</view>
        <view slot="cell" class="kcCell">
          <span> 生产日期：</span>
          <span class="scDate"
            @click="handleCell(v)">{{v.fExTime}}
            <u-icon name="arrow-right"></u-icon>
          </span>
        </view>
      </appProduct>
      <navigator url="/pages/sale/draw/drawSelect"
        class="draw-add">
        <u-icon name="plus" color="#2979ff"
          size="28"></u-icon> 添加库存商品
      </navigator>

      <appProduct v-for="(v,i) in formdata"
        :key="i" :li="v">
        <view slot="cell" class="kcCell">
          <span>散装（{{v.fUnit}}）：</span>
          <u-input border type="text"
            v-model="v.fCount"></u-input>
        </view>
		<view slot="cell" class="kcCell">
		  <span>整装（{{v.fPackUnit}}）：</span>
		  <u-input border type="text"
		    v-model="v.fPackCount"></u-input>
		</view>
        <view slot="cell" class="kcCell">
          <span> 生产日期：</span>
          <span class="scDate"
            @click="handleCell(v)">{{v.fExTime}}
            <u-icon name="arrow-right"></u-icon>
          </span>
        </view>
      </appProduct>
      <u-picker v-model="show" mode="time"
        :default-time="orderItem.fExTime"
        :params="params"
        @confirm="handleSelectDate">
      </u-picker>
      <div class="footer">
        <u-button>取消</u-button>
        <u-button type="primary"
          @click="handleSave">提交</u-button>
      </div>
    </div>
  </view>
</template>

<script>
import appProduct from '@/components/app-product'
export default {
  components: {
    appProduct
  },
  data() {
    return {
      params: {
        year: true,
        month: true,
        day: true
      },
      show: false,
      info: {
        InOut: 1,
        iType: 2,
        CarId: 0,
        CarNo: '',
        Info: ''
      },
      form: {
        OrderType: 0,
        MrkId: 0,
        Key: '',
        OrderStatus: 0
      },
      clineOnce: true,
      id: 0,
      formdata: [],
      getlist: [],
      list: [],
      orderItem: {}
    }
  },
  onLoad(e) {
    getApp().globalData.addCusGoodLi = null
    this.id = Number(e.id)
    this.form.MrkId = this.id
    this.getList()
  },
  methods: {
    handleCell(item) {
      console.log('🚀 ~ file: my_customer_stock_add.vue ~ line 113 ~ handleCell ~ item', item)
      this.orderItem = item
      this.show = true
    },
    handleSelectDate(e) {
      this.orderItem.fExTime = `${e.year}-${e.month}-${e.day} `
    },
    getList() {
      this.$axios('api/MrkProStock/ListPaged', 'post', { value: this.form }).then(res => {
        let lists = res.Value.List.map(x => ({
          id: x.fProId,
          fId: x.fProId,
          gname: x.fProName,
          fExTime: x.fOverTime,
          fCount: x.fCount,
		  fUnit: x.fUnit,
		  fPackCount: x.fPackCount,
		  fPackUnit: x.fPackUnit,
          fPrice: x.fPrice
        }))
        this.list = lists
      })
    },
    handleSave() {
      if (!this.clineOnce) return false
      this.clineOnce = false

      let lists = this.list.map(x => ({
        Count: x.fCount,
        Price: x.fPrice,
		Unit: x.fUnit,
		PackUnit:x.fPackUnit,
		PackCount:x.fPackCount,
        MrkId: this.id,
        ProId: x.fId,
        OverTime: x.fExTime,
        ProName: x.gname
      }))
      this.getlist = lists

      let list = this.formdata.map(x => ({
        Count: x.fCount,
        Price: x.fPrice,
		Unit: x.fUnit,
		PackUnit:x.fPackUnit,
		PackCount:x.fPackCount,
        MrkId: this.id,
        ProId: x.fId,
        OverTime: x.fExTime,
        ProName: x.gname
      }))
      this.getlist = [].concat.apply(this.getlist, list)

      this.$axios('api/MrkProStock/AddListDetail', 'post', { value: this.getlist }).then(res => {
        if (!res.Success) {
          uni.showToast({
            title: '提交失败：' + res.Message,
            icon: 'none',
            duration: 2000
          })
          this.clineOnce = true
          return false
        }
        this.clineOnce = true
        this.$api.handleToUrl('提交成功', '/pages/my_customer/my_customer_stock?id=' + this.id)
        // this.$api.handleBack('添加成功')
        //  getApp().globalData.addCusGoodLi=null
      })
    }
  },
  onShow() {
    if (getApp().globalData.addCusGoodLi) {
      let orders = getApp().globalData.addCusGoodLi
      orders.forEach(x => ((x.details = [{ label: '商品价格', value: x.fPrice }]), (x.fCount = 0), (x.fPackCount = 0)))
      this.formdata = orders
    }
  },
  created() {}
}
</script>

<style lang="scss" scoped>
.app-draw-add {
  padding-bottom: 70rpx;
  .draw-item {
    .title {
      font-size: 30rpx;
      color: #7f7f7f;
      margin-top: 30rpx;
      margin-left: 30rpx;
    }
  }
  .draw-add {
    color: #007aff;
    font-size: 30rpx;
    padding: 32rpx;
    text-align: center;
  }
  .draw-mark {
    display: flex;
    padding: 0 32rpx;
    u-input {
      flex: 1;
    }
  }
  .footer {
    margin-top: 32rpx;
    display: flex;
    justify-content: center;
    position: sticky;
    bottom: 2%;
    u-button,
    .u-btn {
      width: 40%;
    }
    u-button + u-button {
      margin-left: 30rpx;
    }
  }
}
.kcCell {
  display: flex;
  padding: 5px 0;
  .scDate {
    flex: 1;
    display: flex;
    justify-content: space-between;
    u-icon,
    .u-icon {
      color: #ccc;
    }
  }
}
</style>